<template>
	<div style="display: flex;flex-direction: column;" class="otherPage centreOfExcellence ceContactUs">
		<Header :selected="8"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bgImg? 'background:url('+bgImg+') no-repeat;background-size:cover;':''">
			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :checked="4" :bgColor="bgColor">
		</Navigation>
		<div class="content" style="min-height: 600px;">
			<div class="content_bg" style="min-height: 600px;">
				<el-row>
					<el-col :xs="24" :sm="24" :md="9" :lg="9">
						&nbsp;
					</el-col>
					<el-col :xs="24" :sm="24" :md="6" :lg="6" class="zaixianliuyan">
						<el-divider>{{$t('onlineMessage')}}</el-divider>
					</el-col>
					<el-col :xs="24" :sm="24" :md="9" :lg="9">
					</el-col>
				</el-row>
				<el-row>
					<el-col :xs="24" :sm="24" :md="4" :lg="4">
						&nbsp;
					</el-col>
					<el-col :xs="24" :sm="24" :md="16" :lg="16">
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px"
							class="demo-ruleForm">
							<el-row>
								<el-col :xs="24" :sm="24" :md="12" :lg="12">
									<el-form-item :label="$t('name')+':'" prop="name">
										<el-input v-model="ruleForm.name" :placeholder="$t('placeholderName')">
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="12" :lg="12">
									<el-form-item :label="$t('telephone')+':'" prop="mobile">
										<el-input v-model="ruleForm.mobile" :placeholder="$t('placeholderMobile')">
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :xs="24" :sm="24" :md="12" :lg="12">
									<el-form-item :label="$t('address')+':'" prop="address">
										<el-input v-model="ruleForm.address" :placeholder="$t('placeholderAddress')">
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="12" :lg="12">
									<el-form-item :label="$t('email')+':'" prop="email">
										<el-input v-model="ruleForm.email" :placeholder="$t('placeholderEmail')">
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>


							<el-form-item :label="$t('messageContent')+':'" prop="content">
								<el-input type="textarea" :placeholder="$t('placeholderContent')"
									v-model="ruleForm.content"></el-input>
							</el-form-item>
							<el-form-item :label="$t('verificationCode')+':'" prop="verificationCode">
								<el-input v-model="ruleForm.verificationCode" auto-complete="off"
									:placeholder="$t('placeholderVerificationCode')" style="width: 63%"
									@keyup.enter.native="submitForm('ruleForm')">
									<el-button slot='prepend' icon='el-icon-collection-tag'></el-button>
								</el-input>
								<div class="login-code">
									<img :title="$t('anotherOneTip')" :src="codeUrl" @click="getCode">
									<img>
								</div>
							</el-form-item>
							<el-form-item>
								<div style="height: 100%;width: 210px;margin: 0 auto;">
									<el-button :loading="loading" style="height: 100%;width: 110px;" type="primary"
										@click="submitForm('ruleForm')">{{$t("submit")}}</el-button>
									<el-button @click="resetForm('ruleForm')">{{$t('resetting')}}</el-button>
								</div>
							</el-form-item>
						</el-form>
					</el-col>
					<el-col :xs="24" :sm="24" :md="4" :lg="4">
						&nbsp;
					</el-col>
				</el-row>


				<el-row style="height: 144px;background-color: #F6F6F6;margin-top: 30px;">
					<el-col :xs="24" :sm="24" :md="5" :lg="5">
						<div class="ceContactUs_companyInfo">
							<div class="ceContactUs_companyName" v-html="$t('placeholderGTTG')">
							</div>
							<div class="ceContactUs_deptName">
								{{data.deptName?data.deptName:$t("hrDepartment")}}
							</div>

							<div class="bg_iconGttG"></div>
						</div>
					</el-col>
					<el-col :xs="24" :sm="24" :md="5" :lg="5" style="">
						<div class="companyAddressArea">
							<div class="iconAddress"></div>
							<div>
								<div class="ceContactUs_Title">{{$t("companyAddress")}}</div>
								<div class="ceContactUs_Content" :title="data.address?data.address:'---'">{{data.address?data.address:'---'}}</div>
							</div>

						</div>
					</el-col>
					<el-col :xs="24" :sm="24" :md="5" :lg="5">
						<div
							style="display: flex;position: relative;padding-left: 70px; background-color: #F4F2F2;height: 144px; width: 100%;">
							<div class="iconTel"></div>
							<div style="position: relative;z-index: 999;">
								<div class="ceContactUs_Title">{{$t("telephone")}}</div>
								<div class="ceContactUs_Content" :title="data.mobile"> {{data.mobile?data.mobile:'---'}}</div>
							</div>
							<div class="bg_iconTel"></div>
						</div>

					</el-col>
					<el-col :xs="24" :sm="24" :md="5" :lg="5">
						<div
							style="display: flex;position: relative;padding-left: 70px;padding-right: 20px; background-color: #EBEBEB;height: 144px; width: 100%;">
							<div class="iconEmail"></div>
							<div style="position: relative;z-index: 999;">
								<div class="ceContactUs_Title">{{$t("email")}}</div>
								<div class="ceContactUs_Content" :title="data.email">{{data.email?data.email:'---'}}</div>
							</div>
							<div class="bg_iconEmail"></div>
						</div>
					</el-col>
					<el-col :xs="24" :sm="24" :md="4" :lg="4">
						<div class="ceContactUs_qrCodeArea">
							<img :src="data.qrCode" class="ceContactUs_qrCode" />
						</div>
					</el-col>
				</el-row>

			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../components/common/header/Header.vue'
	import Navigation from '../../components/common/navigation/Navigation.vue'
	import Footer from '../../components/common/footer/Footer.vue'
	import {
		v4 as uuidv4
	} from 'uuid';
	import {
		centreOfExcellenceMenu
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer
		},
		data() {
			return {
				loading: true,
				codeUrl: '',
				ruleForm: {
					name: '',
					address: '',
					email: '',
					mobile: '',
					content: '',
					codeId: ''
				},
				rules: {
					codeId: [{
						required: true,
						message: this.$t('verificationCodeTip'),
						trigger: 'blur'
					}],
					name: [{
							required: true,
							message: this.$t('placeholderName'),
							trigger: 'blur'
						},
						{
							min: 1,
							max: 255,
							message: this.$t('between1To15Tip'),
							trigger: 'blur'
						}
					],
					address: [{
							required: true,
							message: this.$t('placeholderAddress'),
							trigger: 'blur'
						},
						{
							min: 1,
							max: 15,
							message: this.$t('between1To15Tip'),
							trigger: 'blur'
						}
					],
					email: [{
						required: true,
						message: this.$t('placeholderEmail'),
						trigger: 'blur'
					}, {
						type: 'email',
						message: this.$t('correctEmailTip'),
						trigger: ['blur', 'change']
					}],
					mobile: [{
						required: true,
						message: this.$t('placeholderMobile'),
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: this.$t('placeholderContent'),
						trigger: 'blur'
					}]
				},
				bgImg: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: centreOfExcellenceMenu,
				breadcrumbItems: [{
						label: this.$t('home'),
						to: '/'
					},
					{
						label: this.$t('centreOfExcellence'),
						to: '/centreOfExcellence'
					},
					{
						label: this.$t('ceContactUs'),
						to: '/ceContactUs'
					}
				],
				hoverIndex: -1,
				data: {

				}

			};
		},
		computed: {},
		created() {},
		mounted() {
			// 绑定监听事件
			window.addEventListener('keydown', this.keyDown);
			this.getCode();
			this.bindBg();
			this.getContactInfo();
		},

		destroyed() {
			// 销毁事件
			window.removeEventListener('keydown', this.keyDown, false);
		},
		methods: {
			/**
			 *获取投诉建议顶部背景
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.getOnlineMessageTopImage(params).then(res => {
					this.bgImg = res.data.fileUrl
				}).catch((error) => {
					console.log(error);
				});

			},
			/**
			 * 提交在线留言
			 */
			save() {
				this.loading = true;
				return new Promise((resolve, reject) => {
					let params = this.ruleForm;
					let that = this;
					that.$request.saveOnlineMessage(params).then(res => {
						that.loading = false;
						that.getCode();
						resolve(res);
					}).catch((error) => {
						console.log(error);
					});
				});
			},
			/**
			 * 获取在线留言联系方式
			 */
			getContactInfo() {

				let params = {};
				let that = this;
				that.$request.getContactInfo(params).then(res => {
					this.data = res.data
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});

			},
			//////获取图片 和uuid
			getCode() {
				this.ruleForm.codeId = uuidv4();
				this.$request.getVerificationCode(this.ruleForm.codeId).then(res => {
					this.codeUrl = res;
				}).catch((err) => {
					console.log('err', err);
				});
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.save().then(i => {
							if (i.code == 1000) {

								this.$notify({
									message: this.$t('successfullyTip'),
									position: 'bottom-right',
									type: 'success'
								});

							} else {
								this.$notify({
									message: this.$t('refreshCodeTip'),
									position: 'bottom-right',
									type: 'warning'
								});
							}

						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			////////// 提交
			keyDown(e) {
				// 回车则执行提交方法 enter键的ASCII是13
				if (e.keyCode == 13) {
					this.submitForm('ruleForm'); // 定义的方法
				}
			},
			resetForm(formName) {
				this.getCode()
				this.$refs[formName].resetFields();
			},
		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/contactUs/contactUs.css");

	.ceContactUs .content_bg {
		padding: 50px 100px 50px 100px;
	}

	.login-code {
		width: 33%;
		display: inline-block;
		height: 38px;
		float: right;

		img {
			cursor: pointer;
			vertical-align: middle
		}
	}

	.login-code img {
		height: 38px;
		cursor: pointer;

	}

	.login-forget-pas {
		font-size: 14px;
		color: #2880E4;
		line-height: 20px;
		cursor: pointer;
		text-align: center;
	}

	.login-btn button {
		width: 100%;
		height: 44px;
		text-align: center;
		margin-bottom: 10px;
		background-color: #017EFF;
	}

	.iconTel {
		height: 30px;
		width: 60px;
		margin: 0 auto;
		background: url("../../assets/icons/icon_Tel.png") no-repeat;
		background-position: center;
		background-size: 20px;
		margin-top: calc((144px - 30px)/2);
		position: absolute;
		left: 14px;
	}

	.iconAddress {
		height: 30px;
		width: 60px;
		margin: 0 auto;
		background: url("../../assets/icons/icon_Address.png") no-repeat;
		background-position: center;
		background-size: 20px;
		margin-top: calc((144px - 30px)/2);
		position: absolute;
		left: 0px;
	}

	.ceContactUsArea {
		height: 16vh;
		/* 		display: flex; */
		margin-top: 2vh;
	}

	.ceContactUs_Title {
		height: 40px;
		line-height: 40px;
		align-items: center;
		width: 100%;
		text-align: left;
		color: #0484D7;
		font-weight: 530;
		margin-top: 36px;
		font-size: 16px;
	}

	.ceContactUs_Content {
		height: 60px;
		line-height: 22px;
		align-items: center;
		width: 100%;
		text-align: left;
		color: #0484D7;
		font-size: 14px;
		word-break: break-all;


	}

	.iconEmail {
		height: 30px;
		width: 60px;
		margin: 0 auto;
		background: url("../../assets/icons/icon_Email.png") no-repeat;
		background-position: center;
		background-size: 25px;
		margin-top: calc((144PX - 30px)/2);
		position: absolute;
		left: 10px;
	}

	.ceContactUs_qrCodeArea {
		height: 110px;
		width: 110px;
		margin: 0 auto;
		margin-top: 17px;
	}

	.ceContactUs_qrCode {
		object-fit: fill;
		height: 110px;
		width: 110px;
		border-radius: 10px;
	}

	.zaixianliuyan {
		text-align: center;
	}

	.zaixianliuyan .el-divider {
		background-color: #2880E4;
	}

	.zaixianliuyan .el-divider--horizontal div {
		color: #2880E4;
	}

	.ceContactUs_companyInfo {
		height: 144px;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.ceContactUs_deptName {
		height: 40px;
		line-height: 40px;
		font-size: 19px;
		font-weight: 400;
		color: #333333;
		text-align: center;
		position: relative;
		z-index: 999;
	}

	.companyAddressArea {
		background: url('../../assets/img/bg_company_address.png') no-repeat;
		background-size: cover;
		height: 144px;
		width: 100%;
		display: flex;
		position: relative;
		padding-left: 54px;
		padding-right: 20px;
	}

	.companyAddressArea .ceContactUs_Content {
		width: 100%;
		height: 60px;
		line-height: 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.ceContactUs_companyName {
		width: 100%;
		height: 56px;
		font-size: 22px;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #333333;
		line-height: 28px;
		text-align: center;
		margin-top: 27px;
		position: relative;
		z-index: 999;
	}

	.bg_iconTel {
		background: url('../../assets/img/bg_iconTel.png') no-repeat;
		background-size: 99px 84px;
		height: 84px;
		width: 99px;
		position: absolute;
		right: 5px;
		bottom: 5px;
	}

	.bg_iconEmail {
		background: url('../../assets/img/bg_iconEmail.png') no-repeat;
		background-size: 99px 84px;
		height: 84px;
		width: 99px;
		position: absolute;
		right: 5px;
		bottom: 5px;
	}

	.bg_iconGttG {
		background: url('../../assets/img/bg_iconGttG.png') no-repeat;
		background-size: 85px 100px;
		height: 100px;
		width: 85px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 22px
	}

	

	@media (max-width:1280px) {
		.ceContactUs_companyName {
		/* 	margin-top: 10px; */
		}
	}

	.content_bg {
		padding: 0;
		margin: 0 auto;
	}

	@media screen and (max-width: 1080px) {}



	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.companyCultureImgArea {
			width: 60%;
		}

		.companyCultureContent {}

	}

	@media (max-width: 1720px) {


		.content_bg {
			width: calc(1720px * 0.8);
		}
	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}
	}

	@media (max-width: 1120px) {
		.content_bg {
			width: 100%
		}
		.ceContactUs_companyName{
			font-size: 20px;
		}
	}

	@media (max-width: 1024px) {}

	@media (max-width: 900px) {}
	@media (max-width:768px) {
		.NavigationArea {
			padding: 0px;
		}
	
		.menus_white {
			width: 16.6% !important;
		}
	
		.ceContactUs .content_bg {
			padding: 5px;
		}
	
		.ceContactUs .content {
			min-height: 600px;
			width: 100%;
			padding: 10px;
			margin: 0 auto;
		}
	}
</style>
